Welcome to Css!

2.09 nth-child选择器1

1、选择的是li的父元素中的第3个元素

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css注释</title>

<style>

li:nth-child(3){color:blue;}

</style>

</head>

<body>

<ul>

<li>我要好好学习1</li>

<li>我要好好学习2</li>

<li>我要好好学习3</li>

<li>我要好好学习4</li>

<li>我要好好学习5</li>

</ul>

</body>

</html>

返回值:

如style改成如下,则变成奇数行生效,偶数为2n同理

<style>

li:nth-child(2n+1){color:blue;}

</style>

返回值: